<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四川大学华西医院</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="icon" href="/static/img/k8e6.jpg"/>
    <link rel="apple-touch-icon" href="/static/img/k8e6.jpg"/>
    <style type="text/css">
        body {
            background-color: #fcfcfc;
        }

        .bg {
            background-color: #ffffff;
            height: 191px;
            position: relative;
        }

        .title-icon {
            position: absolute;
            top: 15px;
        }

        .title-people {
            position: absolute;
            right: 0;
        }

        .title-1 {
            line-height: 99px;
            margin-left: 83px;
            font-size: 44px;
            color: #ffb800;
            font-weight: bold;
            font-family: 楷体, serif;
            z-index: 10;
        }

        .title-2 {
            line-height: 66px;
            margin-left: 335px;
            margin-top: -25px;
            font-size: 22px;
            color: #00bbff;
            font-weight: bold;
            font-family: 楷体, serif;
            z-index: 10;
        }

        .time {
            font-size: 18px;
            float: right;
        }

        .main {
            border: 1px #ececec solid;
        }

        .main-img1 {
            position: absolute;
            bottom: 10px;

        }

        .layui-tab-item {
            min-height: 700px;
        }

        .d-none {
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-container" style="background-color: white">
    <div class="layui-row bg">
        <img src="static/img/k8e6.jpg" alt="" height="66" width="66" class="title-icon">
        <img src="static/img/1.jfif" alt="" height="190" width="450" class="title-people">
        <p class="title-1">四川大学华西医院</p>
        <p class="title-2">———网上预约挂号系统</p>
    </div>
    <div class="layui-row">
        <p class="time">2020年1月1日 11：11：11</p>
    </div>
    <div class="layui-row main">
        <div class="layui-tab layui-tab-brief" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="tab1">挂号须知</li>
                <li lay-id="tab2">病员注册</li>
                <li lay-id="tab3">网上挂号</li>
                <li lay-id="tab4">挂号查询</li>
                <li lay-id="tab5">我的信息</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <p>挂号须知</p>
                    <p>欢迎您网上挂号，请您自觉遵守以下条款</p>
                    <p>1、预约挂号采用三种方式：电话预约，网络预约，现场预约。</p>
                    <p>2、预约挂号由门诊挂号室负责预约和取号。</p>
                    <p>3、周一至周五预约挂号。需提前三天预约。</p>
                    <p>4、您预约的专家号，上午号请在10点以前取走，下午号请在15 点以前取走，否则您的预约号将自动作废。</p>
                    <p>5、预约者需持有效身份证件，在预约有效时限内，到挂号室办理 取号手续，然后到指定诊室按照预约挂号顺序依次就诊。</p>
                    <p>6、网上挂号实行实名注册，用户必须成为网站的注册会员方可使用网上挂号功能。</p>
                    <p>7、预约后请于一个工作日后（24小时）在挂号查询界面查询挂号是否通过审核，通过审核为ture,未通过审核为false。通过审核后，在预约有效期限内，持有效身份证件到挂号室办理取号手续。</p>
                    <p>8、预约电话：10010&nbsp;&nbsp;预约网址：<a href="http://ammo.red">http://ammo.red</a></p>
                    <p>网上挂号流程：</p>
                    <p style="text-align: center;">
                        <img src="static/img/3.jpg" alt="">
                    </p>
                </div>
                <div class="layui-tab-item">
                    <div>
                        <form action="" method="post" class="layui-form" id="form1" lay-filter="form1">
                            <div class="layui-form-item">
                                <input type="text" class="layui-input" placeholder="请输入身份证号" name="account" required
                                       lay-verify="required|identity">
                            </div>
                            <div class="layui-form-item">
                                <input type="text" class="layui-input" placeholder="请输入姓名" name="name" required
                                       lay-verify="required">
                            </div>
                            <div class="layui-form-item">
                                <input type="text" class="layui-input" placeholder="请输入手机号" name="phone" required
                                       lay-verify="required|phone">
                            </div>
                            <div class="layui-form-item">
                                <input type="password" class="layui-input" placeholder="请输入密码" name="password" required
                                       lay-verify="required">
                            </div>
                            <div class="layui-form-item">
                                <button type="submit" lay-submit class="layui-btn">注册</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-col-md3">
                        <p style="height: 38px;">
                            <strong>请选择科室</strong>
                        </p>
                        <table class="layui-table" id="table1"></table>
                    </div>
                    <div class="layui-col-md1">
                        &nbsp;
                    </div>
                    <div class="layui-col-md8">
                        <p style="height: 38px;">
                            <strong>请选择医生</strong>
                            <button class="layui-btn layui-bg-green" style="float: right;"
                                    type="button" onclick="createOrder()">确定预约
                            </button>
                        </p>
                        <table class="layui-table" id="table2"></table>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <strong>今日已受理：</strong>
                    <table id="table3" class="layui-table"></table>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-container" style="width: 100%;">
                        <div class="layui-row" style="margin-bottom: 5px;float: right;">
                            <button id="info" class="layui-btn" type="button" onclick="info()">登陆查看信息</button>
                            <button id="changeUserInfo" class="layui-btn d-none" type="button"
                                    onclick="changeUserInfo()">修改信息
                            </button>
                            <button id="logout" class="layui-btn layui-bg-gray d-none" type="button" onclick="logout()">退出</button>
                        </div>
                        <div class="layui-row">
                            <form class="layui-form" id="form2" lay-filter="form2">
                                <input type="hidden" id="objId" name="objId">
                                <div class="layui-form-item">
                                    <label for="account" class="layui-form-label">身份证号：</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" type="text" placeholder="身份证号" readonly id="account"
                                               name="account">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="name" class="layui-form-label">姓名：</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" type="text" placeholder="姓名" id="name" name="name"
                                               required>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="sex" class="layui-form-label">性别：</label>
                                    <div class="layui-input-inline">
                                        <select id="sex" name="sex" class="layui-form-select">
                                            <option value="">请选择</option>
                                            <option value="男">男</option>
                                            <option value="女">女</option>
                                        </select>
                                    </div>
                                    <label for="age" class="layui-form-label">年龄：</label>
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" placeholder="年龄" id="age" name="age">
                                    </div>
                                    <label for="birthday" class="layui-form-label">生日：</label>
                                    <div class="layui-input-inline">
                                        <input class="layui-input" type="text" placeholder="生日" id="birthday"
                                               name="birthday" style="width: 357px;">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="phone" class="layui-form-label">手机号：</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" type="text" placeholder="手机号" id="phone"
                                               name="phone">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="address" class="layui-form-label">地址：</label>
                                    <div class="layui-input-block">
                                        <input class="layui-input" type="text" placeholder="地址" id="address"
                                               name="address">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="layui-row">
                            <hr>
                        </div>
                        <div class="layui-row">
                            <strong>全部工单：</strong>
                            <table id="table4" class="layui-table"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="text-align: center">
        <p>版权所有：四川大学华西医院&nbsp;&nbsp;&nbsp;&nbsp;地址：四川省成都市武侯区国学巷37号</p>
        <p>联系电话：+86 150777853261&nbsp;&nbsp;EMAIL：200645049@qq.com&nbsp;&nbsp;邮编：10010</p>
    </div>
</div>
</body>
<script type="text/javascript" src="static/layui/layui.all.js"></script>
<script type="text/javascript" src="static/config.js"></script>
<script type="text/javascript">
    const $ = layui.$;
    const element = layui.element;
    const layer = layui.layer;
    const form = layui.form;
    const table = layui.table;
    const laydate = layui.laydate;

    laydate.render({
        elem: '#birthday'
    });

    //执行渲染
    const table1 = table.render({
        elem: '#table1',
        height: 666,
        width: 283,
        url: baseUrl + "/hospital-web/process/getAllSubject",
        method: "post",
        even: false,
        page: false,
        cols: [[
            {
                field: 'subjectName', title: '科室', width: 280, templet: function (e) {
                    return '<a style="color: #01AAED;" href="javascript:void(0);" onclick="subjectClick(' + "\'" + e.subjectId + "\'" + ')">' + e.subjectName + '</a>';
                }
            }
        ]]
    });
    const table2 = table.render({
        elem: '#table2',
        height: 666,
        url: baseUrl + "/hospital-web/process/getDoctor",
        method: "post",
        even: false,
        page: true,
        cols: [[
            {type: 'numbers', title: '序号', width: 44},
            {type: 'radio', title: '请选择', width: 50},
            {field: 'name', title: '姓名', width: 100},
            {field: 'introduce', title: '介绍'},
            {field: 'workTime', title: '出诊时间'},
            {field: 'status', title: '状态'},
            {field: 'remark', title: '备注'},
        ]],
        where: {
            subject: "00"
        }
    });
    const table3 = table.render({
        elem: '#table3',
        height: 666,
        url: baseUrl + "/hospital-web/process/getOrderToday",
        method: "post",
        even: false,
        page: true,
        cols: [[
            {type: 'numbers', title: '序号', width: 44},
            {field: 'userName', title: '预约人'},
            {field: 'doctorName', title: '医生'},
            {field: 'orderTime', title: '预约时间'},
            {field: 'status', title: '状态'},
        ]]
    });
    const table4 = table.render({
        elem: '#table4',
        height: 333,
        url: baseUrl + "/hospital-web/process/getOrderByUserAccount",
        method: "post",
        even: true,
        page: true,
        cols: [[
            {type: 'numbers', title: '序号', width: 44},
            {field: 'objId', title: '主键', hide: true},
            {field: 'status', title: '状态', width: 129},
            {field: 'userAccount', title: '病人身份证', width: 129},
            {field: 'userName', title: '病人名', width: 129},
            {field: 'doctorName', title: '医生名', width: 88},
            {field: 'orderTime', title: '预约时间', width: 129},
            {field: 'createTime', title: '创建时间', width: 169},
            {field: 'careResult', title: '治疗结果', width: 129},
            {field: 'carePropose', title: '治疗建议', width: 169},
            {field: 'cost', title: '消费', width: 88},
            {field: 'isBed', title: '是否需要住院', width: 169},
            {field: 'isOperation', title: '是否需要手术', width: 169},
            {field: 'bed', title: '床位', width: 88},
            {field: 'operationTime', title: '手术时间', width: 169},
            {field: 'remark', title: '备注', width: 129}
        ]],
        where: {
            userAccount: ""
        }
    });

    //一些事件监听
    element.on('tab(tab)', function (data) {
        if (data.index === 1) {
            layer.open({
                type: 2,
                content: 'info.html',
                area: ['80%', '70%'],
                title: '医院网络服务使用协议',
                closeBtn: 0,
                btn: ['我已了解'],
                yes: function (index, layero) {
                    layer.close(index);
                }
            });
        } else if (data.index === 3) {
            table3.reload({
                page: {
                    curr: 1
                }
            });
        }
    });

    form.on('submit(form1)', function (data) {
        const data1 = form.val("form1");
        console.log(data1);
        $.post({
            url: baseUrl + "/hospital-web/user/register",
            contentType: "application/json",
            dataType: "json",
            data: JSON.stringify(data1),
            success: function (res) {
                console.log(res);
                layer.msg(res.msg);
            }
        });
        element.tabChange('tab', 'tab3');
        $("#form1")[0].reset();
        return false;
    });


    function subjectClick(e) {
        table2.reload({
            where: {
                subject: e,
            },
            page: {
                curr: 1
            }
        });
    }

    function createOrder() {
        let data = table.checkStatus('table2').data;
        if (data.length !== 1) {
            layer.msg("请选择一位医生");
            return;
        }
        data = data[0];
        layer.open({
            type: 2,
            content: 'patient/login-simple.html?doctorId=' + data.objId,
            area: ['400px', '500px'],
            title: '登陆',
            closeBtn: 1
        });
    }

    function info() {
        layer.open({
            type: 2,
            content: 'patient/login-simple2.html',
            area: ['400px', '250px'],
            title: '登陆',
            btn: ["登陆"],
            skin: "layui-layer-molv",
            btnAlign: 'c',
            yes: function (index, args) {
                const frameId = $(args).find("iframe").attr('id');
                const account = $(window.frames[frameId].document).find("#account").val();
                const password = $(window.frames[frameId].document).find("#password").val();
                $.post({
                    url: baseUrl + "/hospital-web/user/login",
                    data: {
                        account: account,
                        password: password
                    },
                    async: false,
                    success: function (res) {
                        console.log(res.data);
                        if (res.data != null) {
                            table4.reload({
                                where: {
                                    userAccount: account
                                },
                                page: {
                                    curr: 1
                                }
                            });
                            form.val("form2", res.data);
                            $("#info").addClass("d-none");
                            $("#changeUserInfo").removeClass("d-none");
                            $("#logout").removeClass("d-none");
                            layer.close(index);
                        } else {
                            layer.msg("账号或密码错误")
                        }
                    }
                });
            }
        });
    }

    function changeUserInfo() {
        const form2 = form.val("form2");
        console.log(form2);
        $.post({
            url: baseUrl + "/hospital-web/user/update",
            data: form2,
            success: function (res) {
            }
        });
        layer.msg('修改成功');
    }

    function logout() {
        location.reload();
    }


</script>
<script type="text/javascript" src="static/date.js"></script>
</html>